@import './WYL_css.css';
@import './var.scss';
// 1920/730 * 180  =475
// 1920-950 = 970



.container {

  header {
    .nav {
      li {
        color: #657571;
        margin: 0 3.75rem;
        list-style: none;

        img {
          margin-right: .3125rem;
        }
      }
    }
  }

  .logo {
    position: relative;

    &__content {
      position: absolute;
      top: 4.6875rem;
      left: 3.125rem;
    }
  }

  .content {

    .left {
      &__article {
        border-bottom: .0625rem solid #ccc;

        h3 {
          span {
            text-decoration: underline;
          }
        }

        &__content {
          p {
            padding-right: .9375rem;
            box-sizing: border-box;
            line-height: 1.375rem;
            color: #2F2E32;
          }

          &__left {
            &__img {
              width: 19.0625rem;
              margin: 3rem 0 2rem 0;

              img {
                box-shadow: .1875rem .1875rem .625rem #75797a
              }
            }
          }
        }
      }

      &__comments {
        border-bottom: .0625rem solid #ccc;
      }

      &__email {
        position: relative;
        margin: 2.1875rem 10rem 4.375rem 0;

        &__content {
          p {
            margin: .625rem 0;

            input {
              width: 18.125rem;
              border: .0625rem solid #ccc;
              margin-left: 1.25rem;
              display: inline-block;
              height: 1.875rem;
            }

            span {
              font-weight: 600;
            }

            textarea {
              margin-left: 1.25rem;
              width: 18.125rem;
              border: .0625rem solid #ccc;
              height: 6.25rem;
            }
          }
        }

        &__btn {
          position: absolute;
          left: 13.4375rem;
          bottom: -2.5rem;
          display: inline-block;
          height: 1.5625rem;
          color: #0a0a0a;
          border: .125rem solid #ccc;
        }
      }
    }

    .right {
      border-left: .0625rem solid #ccc;
      background: linear-gradient(to left, #F0F0F0, #E3E3E3);

      h1 {
        margin: 7% 0 5% 7%;
      }

      p {
        margin: 2% 0 2% 15%;
        line-height: 1.25rem;
      }

      &__categories {
        @include right
      }

      &__archives {
        @include right
      }
    }
  }

  footer {
    background: #222222;
    height: 18.75rem;
    line-height: 1.5625rem;
    padding: 3.125rem 12.5rem 3.125rem 28.125rem;

    .footer__content {
      h1 {
        padding-bottom: 1.25rem;
        color: white;
      }

      ul {
        padding-left: 2.8125rem;
        text-decoration: underline;
      }

      &__about {
        width: 21.25rem;
        color: #645E59;

        span {
          text-decoration: underline;
        }

        p {
          font-size: .9375rem;
        }

        span {
          color: #5E6F66;
        }
      }

      &__Blogroll {
        width: 21.25rem;
        color: #5E6F66;
        font-size: 1rem;

      }

      &__Popular {
        width: 21.25rem;
        font-size: 1rem;
        color: #5E6F66;
      }
    }
  }
}